<template>
  <div>
    <el-card class="box-card" style="margin: 10px 15px 20px 10px;">
      <div slot="header" class="clearfix">
        <span class="blue">奖金明细</span>
        <el-button type="primary" plain @click="exportExcelXq('部门分配详情表','bmxqTable')" style="float: right">导出</el-button>
      </div>
      <div class="text item">
        <el-table
          :data="dwQb" border
          style="width: 100%"
          ref="bmxqTable"
          v-show="false">
          <el-table-column width="80" header-align="center" align="center" type="index" label="序号">
          </el-table-column>
          <el-table-column prop="rySjdw" label="单位名称" header-align="center" align="left" min-width="300">
          </el-table-column>
          <el-table-column prop="rs" label="发放人数" header-align="center" align="center" min-width="80">
          </el-table-column>
          <el-table-column label="奖金" header-align="center" align="center">
            <el-table-column prop="jjJe" label="合计(元)" header-align="center" align="right" min-width="100">
              <template slot-scope="scope">
                {{ $formatNum(scope.row.jjJe)}}
              </template>
            </el-table-column>
            <el-table-column v-for="(item, index) in jjxXq" :key="index" :prop="'jjJeId'+item.jjxId+''"
                             :label="item.jjxName+'(元)'" header-align="center" align="right" min-width="100">
              <template slot-scope="scope">
                {{ $formatNum(scope.row['jjJeId'+item.jjxId+'']) }}
              </template>
            </el-table-column>
            <el-table-column prop="jjJeId" label="其他奖金(元)" header-align="center" align="right" min-width="100">
<!--              <template slot-scope="scope">-->
<!--                {{ $formatNum(scope.row.jjJeId)}}-->
<!--              </template>-->
            </el-table-column>
          </el-table-column>
        </el-table>
        <el-table
          :data="dwQb" border
          style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="slotScope">

              <el-table
                :data="getGwQb(slotScope.row)" border
                style="width: 100%"
                ref="ryxqTable">
                <el-table-column width="80" header-align="center" align="center" type="index" label="序号">
                </el-table-column>
                <el-table-column prop="ryCode" label="编号" header-align="center" align="center" min-width="100">
                </el-table-column>
                <el-table-column prop="ryName" label="姓名" header-align="center" align="center" min-width="100">
                </el-table-column>
                <el-table-column prop="ryZhiwei" label="岗位" header-align="center" align="center" min-width="100">
                </el-table-column>
                <el-table-column prop="ryZwjb" label="职级" header-align="center" align="center" min-width="100">
                </el-table-column>
                <el-table-column label="奖金" header-align="center" align="center">
                  <el-table-column prop="jjJe" label="合计(元)" header-align="center" align="right" min-width="100">
                    <template slot-scope="scope">
                      {{ $formatNum(scope.row.jjJe) }}
                    </template>
                  </el-table-column>
                  <el-table-column v-for="(item, index) in jjxTjXq" :key="index" :label="item.jjxName"
                                   header-align="center" align="center">
                    <el-table-column min-width="100" :prop="'jjJeId'+item.jjxId+''" label="奖金小计(元)" header-align="center"
                                     align="right">
                      <template slot-scope="scope">
                        {{ $formatNum(scope.row['jjJeId'+item.jjxId]) }}
                      </template>
                    </el-table-column>
                    <el-table-column min-width="100" :prop="'jjJeDxId'+item.jjxId+''" label="定向奖金(元)" header-align="center"
                                     v-if="dx"
                                     align="right">
                      <template slot-scope="scope">
                        {{ $formatNum(scope.row['jjJeDxId'+item.jjxId]) }}
                      </template>
                    </el-table-column>
                    <el-table-column min-width="100" :prop="'jjJeFpId'+item.jjxId+''" label="分配奖金(元)" header-align="center"
                                     align="right">
                      <template slot-scope="scope">
                        {{ $formatNum(scope.row['jjJeFpId'+item.jjxId]) }}
                      </template>
                    </el-table-column>
                    <el-table-column min-width="100" :prop="'jjJeJkId'+item.jjxId+''" label="加扣奖金(元)" header-align="center"
                                     align="right">
                      <template slot-scope="scope">
                        {{ $formatNum(scope.row['jjJeJkId'+item.jjxId]) }}
                      </template>
                    </el-table-column>
                  </el-table-column>
                  <el-table-column prop="jjJeId" label="其他奖金(元)" header-align="center" align="right" min-width="100">
<!--                    <template slot-scope="scope">-->
<!--                      {{ $formatNum(scope.row.jjJeId) }}-->
<!--                    </template>-->
                  </el-table-column>
                </el-table-column>
                <el-table-column label="备注" header-align="center" align="left" min-width="200">
                  <template slot-scope="scope">
                    {{ getSm(scope.row) }}
                  </template>
                </el-table-column>
              </el-table>
              <el-button type="primary" plain @click="exportExcelXq('人员分配详情表','ryxqTable')" class="fr mt10">导出详细</el-button>
            </template>
          </el-table-column>
          <el-table-column width="80" header-align="center" align="center" type="index" label="序号">
          </el-table-column>
          <el-table-column prop="rySjdw" label="单位名称" header-align="center" align="left" min-width="300">
          </el-table-column>
          <el-table-column prop="rs" label="发放人数" header-align="center" align="center" min-width="80">
          </el-table-column>
          <el-table-column label="奖金" header-align="center" align="center">
            <el-table-column prop="jjJe" label="合计(元)" header-align="center" align="right" min-width="100">
              <template slot-scope="scope">
                {{ $formatNum(scope.row.jjJe) }}
              </template>
            </el-table-column>
            <el-table-column v-for="(item, index) in jjxXq" :key="index" :prop="'jjJeId'+item.jjxId+''"
                             :label="item.jjxName+'(元)'" header-align="center" align="right" min-width="100">
              <template slot-scope="scope">
                {{ $formatNum(scope.row['jjJeId'+item.jjxId+'']) }}
              </template>
            </el-table-column>
            <el-table-column prop="jjJeId" label="其他奖金(元)" header-align="center" align="right" min-width="100">
<!--              <template slot-scope="scope">-->
<!--                {{ $formatNum(scope.row.jjJeId) }}-->
<!--              </template>-->
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-card class="box-card" style="margin: 10px 15px 20px 10px;">
      <div slot="header" class="clearfix">
        <span class="blue">奖金概况</span>
      </div>
      <div class="text item">
        <el-row>
          <el-col :span="12">
            <div id="totalFf1" style="width:99%;height:400px;"></div>
          </el-col>
          <el-col :span="12">
            <div id="totalFf2" style="width:99%;height:400px;"></div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  workForlwFf
} from '@/api/jiangjin/jiangjinfpjjfpdjb'
import * as echarts from "echarts";
import FileSaver from 'file-saver'
import XLSX from "xlsx";

export default {
  components: {},

  data() {
    return {
      dataForm: {},
      jiangjinFpJjfpdjb: {},
      jjxXq: [],
      jjxTjXq: [],
      jjxJeXq: {},
      dwQb: [],
      grQb: [],
      zjQb: [],
      jcList: [],
      dx: false
    }
  },
  created: function () {

  },
  methods: {
    init(formInfo,
         formInfoDetailed,
         formData,
         GUID,
         wfYwMain,
         wfYwStream,
         dqYwStream,
         dqTask) {
      this.loadData(wfYwMain.ywLyid)
    },
    exportExcelXq(name,ref) {
      const excelName = name;
      try {
        const $e = this.$refs[ref].$el
        let $table = $e.querySelector('.el-table__fixed')
        if (!$table) {
          $table = $e
        }
        const wb = XLSX.utils.table_to_book($table, {
          raw: true
        })

        const wbout = XLSX.write(wb, {
          bookType: 'xlsx',
          bookSST: true,
          type: 'array'
        })
        FileSaver.saveAs(
          new Blob([wbout], {
            type: 'application/octet-stream'
          }),
          `${excelName}.xlsx`,
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.error(e)
      }
    },
    /**
     * 加载数据
     */
    loadData(id) {
      workForlwFf(id).then(response => {
        this.dataForm = response.data.data;
        this.jiangjinFpJjfpdjb = response.data.data.jiangjinFpJjfpdjb;
        if (this.jiangjinFpJjfpdjb && this.jiangjinFpJjfpdjb.jjxJeXq) {
          this.jjxJeXq = JSON.parse(this.jiangjinFpJjfpdjb.jjxJeXq)
        }
        if (this.jiangjinFpJjfpdjb && this.jiangjinFpJjfpdjb.jjxXq) {
          this.jjxXq = JSON.parse(this.jiangjinFpJjfpdjb.jjxXq)
        }
        if (this.jiangjinFpJjfpdjb && this.jiangjinFpJjfpdjb.jjxTjXq) {
          this.jjxTjXq = JSON.parse(this.jiangjinFpJjfpdjb.jjxTjXq)
        }
        this.dwQb = response.data.data.dwQb;
        this.grQb = response.data.data.grQb;
        this.zjQb = response.data.data.zjQb;
        this.jcList = response.data.data.jcList;
        for (var i in this.grQb) {
          if (this.grQb[i].jjJeDxId > 0) {
            this.dx = true;
            break;
          }
        }
        this.$nextTick(() => {
          this.$nextTick(() => {
            setTimeout(() => {
              this.echarts1(this.dwQb);
              this.echarts2(this.zjQb);
            }, 100)
          })
        })
      });
    },
    getGwQb(r) {
      let data = [];
      for (var i in this.grQb) {
        if (this.grQb[i].rySjdwCode == r.rySjdwCode) {
          data.push(this.grQb[i]);
        }
      }
      return data;
    },
    getSm(r) {
      let data = [];
      for (var i in this.jcList) {
        if (this.jcList[i].userCode == r.ryCode) {
          data.push(this.jcList[i].jjSm + "（" + this.jcList[i].lx + this.jcList[i].jjJe + "）");
        }
      }
      return data.join();
    },
    echarts1(ass) {
      var names = ["暂无数据"];
      var voValues = [0];
      if (ass.length > 0) {
        names = [];
        voValues = [];
      }
      for (var i = 0; i < ass.length; i++) {
        names.push(ass[i].rySjdw);
      }
      let seriess = [];
      for(var j in this.jjxXq){
        let voValuess = [];
        for (var i = 0; i < ass.length; i++) {
          voValuess.push(ass[i]["jjJeId"+this.jjxXq[j].jjxId]);
        }
        let series = {
          name:this.jjxXq[j].jjxName,
          data: voValuess,
          type: 'bar'
        }
        seriess.push(series);
      }

      let voValuess = [];
      for (var i = 0; i < ass.length; i++) {
        voValuess.push(ass[i]["jjJeId"]);
      }
      let series = {
        name:"其他",
        data: voValuess,
        type: 'bar'
      }
      seriess.push(series);

      var chartDom = document.getElementById('totalFf1');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        dataZoom: [{
          type: 'slider', //有单独的滑动条，用户在滑动条上进行缩放或漫游。inside是直接可以是在内部拖动显示
          show: true, //是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
          start: 0, //数据窗口范围的起始百分比0-100
          end: 100, //数据窗口范围的结束百分比0-100
          xAxisIndex: [
            0], // 此处表示控制第一个xAxis，设置 dataZoom-slider 组件控制的 x轴 可是已数组[0,2]表示控制第一，三个；xAxisIndex: 2 ，表示控制第二个。yAxisIndex属性同理
        }],
        tooltip: {
          trigger: 'item'
        },
        title: {
          text: '单位汇总',
          x: 'left',
          y: 'top',
        },
        xAxis: {
          type: 'category',
          data: names,
          show: false
        },
        yAxis: {
          type: 'value',
          // minInterval: 1,
        },
        series: seriess
      };
      option && myChart.setOption(option);

    },
    echarts2(ass) {
      var names = ["暂无数据"];
      var voValues = [0];
      if (ass.length > 0) {
        names = [];
        voValues = [];
      }
      for (var i = 0; i < ass.length; i++) {
        names.push(ass[i].ryZwjb);
      }
      let seriess = [];
      for(var j in this.jjxXq){
        let voValuess = [];
        for (var i = 0; i < ass.length; i++) {
          voValuess.push(ass[i]["jjJeId"+this.jjxXq[j].jjxId]);
        }
        let series = {
          name:this.jjxXq[j].jjxName,
          data: voValuess,
          type: 'bar'
        }
        seriess.push(series);
      }

      let voValuess = [];
      for (var i = 0; i < ass.length; i++) {
        voValuess.push(ass[i]["jjJeId"]);
      }
      let series = {
        name:"其他",
        data: voValuess,
        type: 'bar'
      }
      seriess.push(series);

      var chartDom = document.getElementById('totalFf2');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        dataZoom: [{
          type: 'slider', //有单独的滑动条，用户在滑动条上进行缩放或漫游。inside是直接可以是在内部拖动显示
          show: true, //是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
          start: 0, //数据窗口范围的起始百分比0-100
          end: 100, //数据窗口范围的结束百分比0-100
          xAxisIndex: [
            0], // 此处表示控制第一个xAxis，设置 dataZoom-slider 组件控制的 x轴 可是已数组[0,2]表示控制第一，三个；xAxisIndex: 2 ，表示控制第二个。yAxisIndex属性同理
        }],
        tooltip: {
          trigger: 'item'
        },
        title: {
          text: '职级汇总',
          x: 'left',
          y: 'top',
        },
        xAxis: {
          type: 'category',
          data: names,
          show: true
        },
        yAxis: {
          type: 'value',
          // minInterval: 1,
        },
        series: seriess
      };
      option && myChart.setOption(option);

    },
    getFormData() {
      var valid = true;
      if (valid) {
        this.$emit("returnFormData", null);
      }
    }
  }
}

</script>

<style>

</style>
